<template>
  <div>
    <!-- 导航 -->
    <ul class="navNav">
      <li class="homePage" @click="goHome()">
        <a class="cateA">首页</a>
      </li>
      <li
        class="lis"
        v-for="(item, index) in cate"
        :key="index"
        @click="go(index, item.id)"
      >
        <a
          class="cateA"
          :class="{ bgc: index == $store.state.Category.nowCateIndex }"
          >{{ item.name }}</a
        >
        <div class="w">
          <p class="item" v-for="it in item.children" :key="it.id">
            <router-link
              tag="img"
              :src="it.picture"
              alt=""
              :to="'/threeCate?id=' + it.id"
            />
            <span>{{ it.name }}</span>
          </p>
        </div>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  computed: {
    cate() {
      return this.$store.state.Category.cate;
    },
  },
  data() {
    return {
      ids: null,
    };
  },
  methods: {
    // 点击跳转的时候
    go(index, id) {
      // 调用存储下标的方法
      this.$store.commit("Category/setCateIndex", index);
      // 判断变量不为空的时候 说明有id  然后跳转
      // 或者是两个id不同的时候跳转 因为id不同所以要跳转到别的页面
      if (!this.ids || this.ids != id) {
        this.ids = id;
        this.$router.push("/cateView?id=" + id);
      } else {
        // 如果id没有值 或者两个id相同的时候返回 让他不执行
        return false;
      }
    },
    // 点击跳转首页 存储首页
    goHome() {
      // 存储一下首页 让导航判断失去样式
      this.$store.commit("Category/setCateIndex", "首页");
      // 跳转到首页
      this.$router.push("/indexView");
    },
  },
};
</script>

<style lang="scss" scoped>
.bgc {
  color: #27ba9b !important;
  border-bottom: 1px solid #27ba9b;
}
.homePage:hover {
  .cateA {
    color: #27ba9b;
    border-bottom: 1px solid #27ba9b;
    cursor: pointer;
  }
}
.navNav {
  width: 820px;
  height: 32px;
  display: flex;
  padding-left: 40px;
  position: relative;
  li {
    height: 60px;
    .cateA {
      display: block;
      width: 38px;
      height: 32px;
      line-height: 32px;
      text-align: center;
      margin-right: 40px;
      font-size: 16px;
      color: #333;
    }
  }
  .lis:hover a {
    color: #27ba9b;
    border-bottom: 1px solid #27ba9b;
    cursor: pointer;
  }
}
.lis:hover {
  & .w {
    transition: all 0.5s 0.1s;
    height: 132px;
    opacity: 1;
  }
}
.w {
  overflow: hidden;
  height: 0;
  background-color: white;
  position: absolute;
  left: -200px;
  top: 56px;
  z-index: 999;
  opacity: 0;
  transition: all 0.5s 0.1s;
  box-shadow: #888888 0px 0px 5px;
  display: flex;
  align-items: center;

  .item {
    width: 110px;
    height: 90px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    img {
      width: 60px;
      height: 60px;
    }
  }
  .item:hover {
    color: #27ba9b;
    cursor: pointer;
  }
}
</style>
